<template>
    <div class="outMedicine">
        <el-container>
            <el-header height="40px">
                <div class="block">
                    <el-row>
                        <el-col :span="6">
                            <el-date-picker v-model="value1" type="date" placeholder="开始日期" format="yyyy 年 MM 月 dd 日"
                                value-format="yyyy-MM-dd" size="mini">
                            </el-date-picker>
                        </el-col>
                        <el-col :span="6">
                            <el-date-picker v-model="value2" type="date" placeholder="结束日期" format="yyyy 年 MM 月 dd 日"
                                value-format="yyyy-MM-dd" size="mini">
                            </el-date-picker>
                        </el-col>
                    </el-row>
                </div>
            </el-header>
            <el-container>
                <el-aside width="350px">
                    <br>
                    <!-- <el-button type="primary" icon="el-icon-search" size="mini">搜索</el-button> -->
                    <el-button type="primary" icon="el-icon-refresh-left" size="mini" @click="flush">刷新</el-button>
                    &nbsp;&nbsp;
                    <span>当前操作对象：{{fieldName}}</span>
                    <br><br>
                    <el-table :data="medicining" height="250" border style="width: 100%" max-height="250">
                        <el-table-column label="未出药">
                            <el-table-column fixed="right" label="操作" width="100">
                                <template slot-scope="scope">
                                    <el-button type="danger" size="mini" @click="handleMedicining(scope.row)"
                                        icon="el-icon-delete" circle></el-button>
                                    <el-button type="info" size="mini" icon="el-icon-notebook-2" circle
                                        @click="showMediciningList(scope.row)"></el-button>
                                </template>
                            </el-table-column>
                            <el-table-column prop="prescriptionId" label="处方号" width="99"></el-table-column>
                            <el-table-column prop="patientName" label="姓名" width="150"></el-table-column>
                        </el-table-column>
                    </el-table>
                    <!-- 未出药人员分页 -->
                    <el-pagination background layout="prev, pager, next" :total="pageData1.total"
                        :page-size="pageData1.size" :current-page="pageData1.current"
                        @current-change="handlePageMedicining">
                    </el-pagination>
                    <br><br>
                    <!-- 以出药 -->
                    <el-table :data="medicined" height="250" border style="width: 100%" max-height="250">
                        <el-table-column label="以出药">
                            <el-table-column fixed="right" label="操作" width="100">
                                <template slot-scope="scope">
                                    <el-button type="danger" size="mini" @click="handleMedcinied(scope.row)"
                                        icon="el-icon-delete" circle></el-button>
                                    <el-button type="info" size="mini" icon="el-icon-notebook-2" circle
                                        @click="showMedicinedList(scope.row)"></el-button>
                                </template>
                            </el-table-column>
                            <el-table-column prop="prescriptionId" label="处方号" width="99"></el-table-column>
                            <el-table-column prop="patientName" label="姓名" width="150"></el-table-column>
                        </el-table-column>
                    </el-table>
                    <!-- 以出药人员分页 -->
                    <el-pagination background layout="prev, pager, next" :total="pageData2.total"
                        :page-size="pageData2.size" :current-page="pageData2.current"
                        @current-change="handlePageMedicined">
                    </el-pagination>
                </el-aside>
                <el-main>
                    <el-table :data="product" border style="width: 100%" height="575">
                        <el-table-column prop="productName" label="名称" width="180"></el-table-column>
                        <el-table-column prop="productFormat" label="规格" width="180"></el-table-column>
                        <el-table-column prop="medicineNum" label="数量"></el-table-column>
                        <el-table-column prop="using" label="用法">/</el-table-column>
                        <el-table-column prop="productRetailPrice" label="单价"></el-table-column>
                        <el-table-column label="操作">
                            <el-checkbox checked>选中</el-checkbox>
                        </el-table-column>
                    </el-table>
                    <br>
                    <el-row :gutter="20">
                        <el-col :span="1" :offset="21">
                            <el-button type="primary" @click="outMedicineOk">确认出药</el-button>
                        </el-col>
                    </el-row>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>

<script>
    export default {
        name: 'OutMedicineme',
        methods: {
            getNowTime() {

                var now = new Date();
                var year = now.getFullYear(); //获取完整的年份
                var month = now.getMonth() + 1; //获取当前月份(0-11,0代表1月)
                var day = now.getDate() + 1;
                var date1 = year + '-' + month + '-' + now.getDate();
                var date2 = year + '-' + month + '-' + day;
                this.value1 = date1;
                this.value2 = date2;
            },
            //查询未出药人员
            queryMedicining() {
                this.$http.get("http://localhost:8088/queryMedicining", {
                        params: {
                            current: this.pageData1.current,
                            isGiveMedicine: 'no',
                            startTime: this.value1,
                            stopTime: this.value2
                        }
                    })
                    .then(res => {
                        console.log(res)
                        Object.assign(this.pageData1, res.data);
                        this.pageData1.total = res.data.data.total;
                        this.medicining = res.data.data.records
                    })
                    .catch(err => {
                        console.error(err);
                    })
            },
            handlePageMedicining(data) {
                this.product1.current = data;
                this.queryMedicining;
            },
            // 删除未出药人员
            handleMedicining() {},
            //展示未出药人员药物清单
            showMediciningList(row) {
                this.$http.get("http://localhost:8088/showMediciningList", {
                        params: {
                            prescriptionId: row.prescriptionId,
                            startTime: this.value1,
                            stopTime: this.value2
                        }
                    })
                    .then(res => {
                        console.log(res)
                        this.product = res.data.data

                    })
                    .catch(err => {
                        console.error(err);
                    })
                this.handleId = row.prescriptionId
                this.fieldName = row.patientName
            },
            //查询以出药人员
            queryMedicined() {
                this.$http.get("http://localhost:8088/queryMedicined", {
                        params: {
                            current: this.pageData2.current,
                            isGiveMedicine: 'yes',
                            startTime: this.value1,
                            stopTime: this.value2
                        }
                    })
                    .then(res => {
                        Object.assign(this.pageData2, res.data);
                        this.pageData2.total = res.data.data.total;
                        this.medicined = res.data.data.records
                    })
                    .catch(err => {
                        console.error(err);
                    })
            },
            handlePageMedicined() {
                this.product2.current = data;
                this.queryMedicined;
            },
            // 删除以出药人员
            handleMedcinied() {},
            //展示以 出药人员药物清单
            showMedicinedList(row) {
                this.$http.get("http://localhost:8088/showMedicinedList", {
                        params: {
                            prescriptionId: row.prescriptionId,
                            startTime: this.value1,
                            stopTime: this.value2
                        }
                    })
                    .then(res => {
                        this.product = res.data.data
                    })
                    .catch(err => {
                        console.error(err);
                    })
                this.handleId = -1;
                this.fieldName = row.patientName
            },
            outMedicineOk() {
                if (this.handleId > 0) {
                    this.$http.post("http://localhost:8088/outMedicineOk", {
                            prescriptionId: this.handleId
                        })
                        .then(res => {
                            this.$message({
                                message: '出药成功',
                                type: 'success'
                            });
                            this.queryMedicining();
                            this.queryMedicined();
                        })
                        .catch(err => {
                            console.error(err);
                        });

                } else if (this.handleId == -1) {
                    this.$message({
                        message: '不可重复操作',
                    });
                } else {
                    this.$message({
                        message: '请先选择用户处方信息',
                    });
                };
                this.handleId = 0;
            },
            flush() {
                this.queryMedicining();
                this.queryMedicined();
            }
        },
        data() {
            return {
                value1: '',
                value2: '',
                handleId: '0',
                fieldName: '暂未选择',
                pageData1: {
                    total: 10,
                    size: 3,
                    current: 1
                },
                pageData2: {
                    total: 10,
                    size: 3,
                    current: 1
                },
                product: [{}],
                medicining: [{

                }],
                medicined: [{

                }],
            }
        },
        mounted() {
            this.getNowTime();
            this.queryMedicining();
            this.queryMedicined();
        }
    }
</script>

<style>
    .outMedicine .el-header {
        padding: 0;
    }
</style>